<!DOCTYPE html>
<html lang="en">
<head>
    <%= require('../../view/common/head.htm') %>
    <style type="text/css">
        #newOrder {
            padding: .3ex;
            color: #fff;
            background-color: #198719;
            text-decoration: none;
            font-family: helvetica, tahoma, arial, verdana, sans-serif;
            font-size: 1.5ex;
            border-width: 0;
        }
    
        #newOrder:hover {
            cursor: pointer;
            background-color: #808000;
        }
    </style>
</head>
<body>
    <%= require('../../view/common/header.htm') %>

    <div id="Content">
        <div id="BackLink">
            <a href="../catalog/catalog-main.html">Return to Main Menu</a>
        </div>

        <div id="Catalog">
            <form id="addressForm">
                <table id="bill" style="width: 520px;margin-left: 267px">
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>
                
                    <tr>
                        <td>Card Type:</td>
                        <td>
                            <select name="order.cardType" id="cardType">
                                <option selected="selected" value="Visa">Visa</option>
                                <option value="MasterCard">MasterCard</option>
                                <option value="American Express">American Express</option>
                            </select>
                        </td>
                    </tr>
                
                    <tr>
                        <td>Card Number:</td>
                        <td>
                            <input name="order.creditCard" type="text" id="cardNumber">
                        </td>
                    </tr>
                
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td><input name="order.expiryDate" type="text" id="date"></td>
                    </tr>
                
                    <tr>
                        <th colspan=2>Billing Address</th>
                    </tr>
                
                    <tr>
                        <td>First name:</td>
                        <td>
                            <input name="order.billToFirstName" type="text" id="firstName">
                        </td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td>
                            <input name="order.billToLastName" type="text" id="lastName">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td>
                            <input name="order.billAddress1" type="text" size="40" id="address1">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input name="order.billAddress2" type="text" size="40" id="address2"></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input name="order.billCity" type="text" id="city"></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input name="order.billState" type="text" size="4" id="state"></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input name="order.billZip" type="text" size="10" id="zip"></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input name="order.billCountry" type="text" size="15" id="country"></td>
                    </tr>
                
                    <tr>
                        <td colspan="2">
                            <input id="shippingCheckbox" name="shippingAddressRequired" type="checkbox" >Ship to different address...
                        </td>
                    </tr>
                </table>
                
                <table style="width: 520px;margin-left: 267px" id="addressTable">

                </table>
                <input name="newOrder" value="Continue" type="button" id="newOrder">
            </form>
        </div>
    </div>

    <%= require('../../view/common/footer.htm') %>
</body>
</html>